<template>
  <div app-container>
    <el-row type="flex" justify="center">
      <el-col :span="21">
        <div align="center" style="background-color: lightgray;height: 60px;">
          <div>
            <span id="mainTitle">订单详情</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="" name="1" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">订单状态</p>
          </template>
          <el-descriptions-item label="订单编号">
            <span v-text="info.orderNum" />
          </el-descriptions-item>
          <el-descriptions-item label="放款状态">
            <dict-tag :options="dict.type.loan_info_credit_status" :value="info.creditStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="审核结果">
            <dict-tag :options="dict.type.loan_info_applicant_status" :value="info.applicantStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="贷款金额">
            <span v-text="info.loanAmount" />
          </el-descriptions-item>
          <el-descriptions-item label="利率/年">
            <span v-text="(info.monRate*1200).toFixed(1)" />%
          </el-descriptions-item>
          <el-descriptions-item label="应放款金额">
            <span v-text="info.loanAmount" />
          </el-descriptions-item>
          <el-descriptions-item label="手续费">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="居间服务费">
            <span v-text="(info.servCharge*100).toFixed(1)" />%
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">产品信息</p>
          </template>
          <el-descriptions-item label="产品名">
            <span v-text="info.productionName" />
          </el-descriptions-item>
          <el-descriptions-item label="贷款支付给">
            <span v-text="info.clientName" />
          </el-descriptions-item>
          <el-descriptions-item label="渠道">
            <span v-text="info.channelName" />
          </el-descriptions-item>
          <el-descriptions-item label="还款方式">
            <dict-tag :options="dict.type.loan_info_payment_method" :value="info.repayMode" />
          </el-descriptions-item>
          <el-descriptions-item label="期数">
            <span v-text="info.periods" />
          </el-descriptions-item>
          <el-descriptions-item label="转换天数">
            <span v-text="info.periods*30" />
          </el-descriptions-item>
          <el-descriptions-item label="综合利率">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="罚息计算方式">
            <span />
          </el-descriptions-item>
          <el-descriptions-item label="居间服务费">
            <span v-text="(info.servCharge*100).toFixed(1)" />%
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-descriptions title="借款信息" name="1" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">客户信息</p>
          </template>
          <el-descriptions-item label="客户姓名">
            <span v-text="info.clientName" />
          </el-descriptions-item>
          <el-descriptions-item label="手机号码">
            <span v-text="info.phone" />
          </el-descriptions-item>
          <el-descriptions-item label="贷款金额">
            <span v-text="info.loanAmount" />
          </el-descriptions-item>
          <el-descriptions-item label="还款方式">
            <dict-tag :options="dict.type.loan_info_payment_method" :value="info.repayMode" />
          </el-descriptions-item>
          <el-descriptions-item label="银行卡号">
            <span v-text="info.bankCardNo" />
          </el-descriptions-item>
          <el-descriptions-item label="银行">
            <span v-text="info.bankName" />
          </el-descriptions-item>
          <el-descriptions-item label="客户备注">
            <span v-text="info.remark" />
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <el-descriptions title="审核状态" name="1" size="medium" :column="3" class="con">
          <template slot="title">
            <p class="title">渠道信息</p>
          </template>
          <el-descriptions-item label="渠道名">
            <span v-text="info.channelName" />
          </el-descriptions-item>
          <el-descriptions-item label="结算帐期">
            <span v-text="info.periods" />
          </el-descriptions-item>
          <el-descriptions-item label="联系人">
            <span v-text="info.linkman" />
          </el-descriptions-item>
          <el-descriptions-item label="联系人电话">
            <span v-text="info.phoneNum" />
          </el-descriptions-item>
          <el-descriptions-item label="业务员">
            <span v-text="info.userName" />
          </el-descriptions-item>
          <el-descriptions-item label="业务员电话">
            <span v-text="info.phoneNumber" />
          </el-descriptions-item>
        </el-descriptions>
        <hr>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div>
          <p class="title">还款计划</p>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            label-class-name="con"
          >
            <el-table-column
              prop=""
              label="期数"
            />
            <el-table-column
              prop=""
              label="账单日期"
              width="180"
            />
            <el-table-column
              prop=""
              label="本金"
            />
            <el-table-column
              prop=""
              label="利息"
            />
            <el-table-column
              prop=""
              label="罚息"
            />
            <el-table-column
              prop=""
              label="待还金额"
            />
          </el-table>
          <hr>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div>
          <p class="title">授信历史</p>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            label-class-name="con"
          >
            <el-table-column
              prop=""
              label="期数"
            />
            <el-table-column
              prop=""
              label="账单日期"
              width="180"
            />
            <el-table-column
              prop=""
              label="本金"
            />
          </el-table>
          <hr>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div>
          <p class="title">修改记录</p>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            label-class-name="con"
          >
            <el-table-column
              prop=""
              label="姓名"
            />
            <el-table-column
              prop=""
              label="修改内容"
              width="180"
            />
            <el-table-column
              prop=""
              label="修改时间"
            />
          </el-table>
          <hr>
        </div>
      </el-col>
    </el-row>
    <el-row justify="center" type="flex">
      <el-col :span="6" :offset="18">
        <el-button type="primary" @click="firstTrial">放款</el-button>
      </el-col>
    </el-row>
    <el-dialog title="放款操作确认" :visible.sync="open" width="500px" append-to-body>
      <el-row type="flex" justify="center">
        <el-col :span="20">
          <el-descriptions size="medium" :column="1">
            <el-descriptions-item label="申请产品">
              <span v-text="info.productionName" />
            </el-descriptions-item>
            <el-descriptions-item label="授信金额">
              <span v-text="info.loanAmount" />
            </el-descriptions-item>
            <el-descriptions-item label="贷款期限">
              <span v-text="info.periods" />
            </el-descriptions-item>
            <el-descriptions-item label="还款方式">
              <dict-tag :options="dict.type.loan_info_payment_method" :value="info.repayMode" />
            </el-descriptions-item>
            <el-descriptions-item label="服务费">
              <span v-text="(info.servCharge*100).toFixed(1)" />%
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form">
        <el-form-item label="放款通道">
          <el-radio-group v-model="form.creditChannel">
            <el-radio label="银行放款通道" />
            <el-radio label="线下通道" />
            <el-radio label="平台放款通道" />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { newViewDetails } from '@/api/viewDetails'
import { UpdateLendingOrder, FindLendingOrderById } from '@/api/lendingOrder'
export default {
  name: 'LendingOrderDetail',
  dicts: ['loan_info_payment_method', 'loan_info_applicant_status', 'loan_info_credit_status'],
  data() {
    return {
      loading: true,
      open: false,
      title: '',
      form: [],
      info: [
      ],
      id: undefined,
      tableData: [],
      allData: [
        {
          title: '',
          data: []
        }
      ]
    }
  },
  created() {
    this.id = this.$route.params && this.$route.params.OrderId
    this.getList(this.id)
  },
  methods: {
    getList(id) {
      newViewDetails(id).then(res => {
        this.allData = res.data
      }).catch()
      FindLendingOrderById(id).then(res => {
        this.info = res.data
      }).catch()
    },
    firstTrial() {
      this.reset()
      this.open = true
      this.title = '进行初审'
    },
    cancel() {
      this.open = false
      this.reset()
    },
    reset() {
      this.form = {
        id: undefined,
        status: '0',
        creditChannel: undefined
      }
      this.resetForm('form')
    },
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.id = this.$route.params && this.$route.params.OrderId
          if (this.form.id !== undefined) {
            UpdateLendingOrder(this.form).then(response => {
              this.$modal.msgSuccess('成功')
              this.open = false
              this.$router.go(-1)
              this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
              this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
              console.log(this.form)
            })
          }
        }
      })
    }
  }
}
</script>
<style>
body>.el-container {
  margin-bottom: 40px;
  display: inline-block;
}

#mainTitle{
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  float: left;
  height: 60px;
  margin-top: 10px;
}

/* 调整整个名字和输入框占的盒子大小 */
#context {
  float: left;
  /* width: 20%;  */
  margin-left: 50px;
}

.long {
  width: 1050px;
  margin-left: 50px;
}

.short {
   float: left;
  /* width: 450px; */
  margin-left: 50px;
}

 .title {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
}
.secondTitle{
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
  background-color: aqua;
  height: 35px;
}
.con{
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
}
</style>
